iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0

純 JS 的環境裡要改變 DOM 元素,除了要找到他,還要用 setAttribute, textContent...等等方式來綁定資料,在 Vue 中只要把資料準備好,愛怎麼綁就怎麼綁,馬上來看看這些『v-』指令的神奇吧!


Vue 範例程式碼

接下來的各種功能,都會使用以下這段程式碼內的資料來示範,下面的段落就不會再重複撰寫宣告 Vue 物件的程式碼了。

const vm = Vue.createApp({
  data () {
    return  {
      test: "Hello",
      num: 999,
      testHTML: "<p>Hola</p>"
    }
  }
}).mount('#app');

{{ }}

  • 前幾天介紹過的雙大括號,用來綁定標籤內的文字
    <div id="app">
      <h1>{{ test }}</h1>
    </div>
    
  • 瀏覽器渲染後
    <div id="app">
      <h1>Hello</h1>
    </div>
    

v-bind

  • v-bind: 用來綁定標籤內的『屬性』
    <div id="app">
      <h1 v-bind:id="test">Hi</h1>
    </div>
    
  • 瀏覽器渲染後
    <div id="app">
      <h1 id="Hello">Hi</h1>
    </div>
    
  • v-bind: 可以直接簡寫成 ":",非常方便
    <div id="app">
      <h1 :id="test">Hi</h1>
    </div>
    

v-model

  • 前面介紹的兩項都是單向綁定,也就是把值取出來然後放到指定位置,v-model 則是雙向綁定,除了把值取出來,也可以把值修改後寫回去原本存放資料的屬性中,通常會搭配 input, textarea, select...等表單元素使用。
  • v-model 搭配 input
    <div id="app">
      <input v-model="test">
      <h1>{{ test }}</h1>
    </div>
    
    • 上面的範例碼在瀏覽器渲染後,若在 input 裡面輸入文字,下方的 h1 也會同時變動。

v-model + 修飾子

v-model後面可以接上修飾子,就可以瞬間完成某些原本需要額外判斷的功能

  1. <input v-model.lazy="test">
    .lazy 的方法可以在取消鎖定在輸入欄位時才觸發雙向綁定。
  2. <input v-model.number="num">
    .number 的方法可以將內容的資料轉成數字格式
  3. <input v-model.trim="test">
    .trim 的方法可以將內容的空白字元過濾掉

v-text

除了用 {{}} 來綁定文字內容,也可以用 v-text來綁定。

<div id="app">
  <h1 v-text="test"></h1>
</div>

要注意的是如果標籤內還有其他文字內容,會被 v-text 給覆蓋掉。


v-html

v-text 像是 textContent,只會用純文字顯示,若要達到 innerHTML 的功能,就要使用 v-html,就能把 HTML 渲染出來了。

<div id="app">
  <h1 v-html="testHTML"></h1>
</div>

v-once

v-once 只會做一次綁定,後面就算資料變更了,也不會重新渲染。

<div id="app">
  <h1 v-once>{{ test }}</h1>
</div>

v-once 放置在標籤內,就像個標示一樣,後面沒有銜接資料。


v-pre

v-pre 是 {{}} 的跳脫字元,想在網頁內容顯示雙大括號時可以使用。

<div id="app">
  <h1 v-pre>{{ test }}</h1>
</div>

上面 HTML 渲染結果會顯示 {{ test }},不會轉換成 Vue 物件內的資料。


上一篇
[Day27] Vue 3 - 方法
下一篇
[Day29] Vue3 - 事件綁定
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言